import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import PageHeader from "@/components/PageHeader";
import {  ControllerType } from "@/components/items-list/ItemsList";
import {Button, Col, Form, Input, Row, Table, ConfigProvider, Modal,Checkbox,Divider} from "antd/lib";
import zhCN from 'antd/es/locale/zh_CN';
import Customer from "@/services/customer";
import notification from "@/services/notification";
import {get} from "lodash";
import "@/pages/contracts/Contract.css";
// import { createHashHistory } from 'history';
// const hashHistory = createHashHistory();

import CreateCustomertempDialog from "@/components/contract/settings/CustomertempDialog";
import CreateCustomertempHrpDialog from "@/components/contract/settings/CustomertempHrpDialog";
import navigateTo from "@/components/ApplicationArea/navigateTo";
import routes from "@/services/routes";

const getRowClassName = (record, index) => {
  let className = '';
  if (index % 2 === 0) className = "oddRow";
  return className
}
const { confirm } = Modal;
class CustomertempList extends React.Component {
  state = {
    page: 1,
    pagesize: 15,
    total:15,
    loading: false,
    code: '',
    name: '',
    data: [],
  };
  static propTypes = {
    controller: ControllerType.isRequired,
  };
    items=[{
      name:"cght",
      slug:"imgs",
      tags:"tags",
      is_draft:"df",
      is_archived:true
    }];
  componentWillMount() {
    let param={
      page: this.state.page,
      pagesize: this.state.pagesize,
      strcustomercode: this.state.code,
      strcustomername: this.state.name,
      blnisinactive:"all",
    }
    this.fetch(param);
  }
  fetch = (params = {}) => {
    this.setState({ loading: true });
    Customer.getcustomerlist(params).then(data => {
        this.setState({
            loading: false,
            data:data.data,
            page: params.page,
            pagesize: params.pagesize,
            total: data.total,
        });
    });
  };
  handlesel = () => {
    let param={
      page: 1,
      pagesize: this.state.pagesize,
      strcustomercode: this.state.code,
      strcustomername: this.state.name,
      blnisinactive:"all",
    }
    this.fetch(param);
  };
  handleload = () => {
    let param={
      page: this.state.page,
      pagesize: this.state.pagesize,
      strcustomercode: this.state.code,
      strcustomername: this.state.name,
      blnisinactive:"all",
    }
    CreateCustomertempHrpDialog.showModal()
    .onClose((result = {}) => {
    if (result.success) {
    this.fetch(param);
    }
    }).onDismiss(() => {
    // navigateTo("customertemp", true);
    });
  };
  handleDelete = record => {
    if(record.blnisinactive)
    {
       notification.error("只有在停用状态可以删除，删除失败！");
       return;
    }
    confirm({
      title: '确定删除合同单位?',
      content: record.strcustomername,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        Customer.deletecustomer(record).then(()=>{
          notification.success("合同单位删除成功.");
          let param={
            page: this.state.page,
            pagesize: this.state.pagesize,
            strcustomercode: this.state.code,
            strcustomername: this.state.name,
            blnisinactive:"all",
          }
          this.fetch(param);
        }).catch(error => {
          notification.error(get(error, "response.data.message", "删除失败."));
        });
      },
    });
  };
  handleTableChange = (pagination, filters, sorter) => {
    let field=sorter.field;
    let order=0;
    if(sorter.order==="descend"){
      order=1;
    }
    let param={
      field: field,
      order: order,
      page: pagination.current,
      pagesize: pagination.pageSize,
      strcustomercode: this.state.code,
      strcustomername: this.state.name,
      blnisinactive:"all",
    }
    this.fetch(param);
  };

  handleUpdate = record => {
            let param={
                  page: this.state.page,
                  pagesize: this.state.pagesize,
                  strcustomercode: this.state.code,
                  strcustomername: this.state.name,
                  blnisinactive:"all",
            }
    CreateCustomertempDialog.showModal({customertemp: record})
    .onClose((result = {}) => {
        if (result.success) {
            this.fetch(param);
        }
      }).onDismiss(() => {
       // navigateTo("customertemp", true);
      });
  };
  handleadd = () => {
    let param={
      page: this.state.page,
      pagesize: this.state.pagesize,
      strcustomercode: this.state.code,
      strcustomername: this.state.name,
      blnisinactive:"all",
    }
    let record={id:0,}
    CreateCustomertempDialog.showModal({customertemp: record})
    .onClose((result = {}) => {
    if (result.success) {
    this.fetch(param);
    }
    }).onDismiss(() => {
    // navigateTo("customertemp", true);
    });
  };
  onDragEnter = info => {
    console.log(info);
  };
  render() {
    const paginationProps = {
          showSizeChanger: true,
          // showQuickJumper: true,
          total: this.state.total, // 数据总数
          pageSize: parseInt(this.state.pagesize), // 每页条数
          current: parseInt(this.state.page), // 当前页码
          pageSizeOptions: ["10", "15", "20","100"],
          showTotal: ((total) => {
            return `共 ${total} 条`;
          }),
        };
    const listcolumns = [
      {
        title: '单位编码',
        key: 'strcustomercode',
        dataIndex: 'strcustomercode',
        render: (text, record) => (
          <a className="clickable" onClick={() => this.handleUpdate(record)}>{text}</a>
        ),
        sorter: (a, b) => a.strcustomercode > b.strcustomercode ? 1 : -1
      },
      {
        title: '单位名称',
        dataIndex: 'strcustomername',
        key: 'strcustomername',
        sorter: (a, b) => a.strcustomername > b.strcustomername ? 1 : -1
      },
      {
        title: '法定代表人',
        dataIndex: 'representative',
        key: 'representative',
        sorter: (a, b) => a.representative > b.representative ? 1 : -1
      },
      {
        title: '电话',
        dataIndex: 'mobile',
        key: 'mobile',
        sorter: (a, b) => a.mobile > b.mobile ? 1 : -1
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        sorter: (a, b) => a.address > b.address ? 1 : -1
      },
      {
        title: '启用',
        dataIndex: 'blnisinactive',
        key: 'blnisinactive',
        render: (text, record) => (
          <span>
            <Checkbox checked={text}></Checkbox>
          </span>
        ),
        sorter: (a, b) => a.blnisinactive > b.blnisinactive ? 1 : -1
      },
      {
        title: '操作',
        key: 'action',
        render: (record) => (
          <span>
            <a className="clickable" onClick={() => this.handleDelete(record)}>删除</a>
          </span>
        ),
      },
    ];
  return (
    <div style={{margin:10}}>
    <ConfigProvider locale={zhCN}>
        <div className="container">
          <PageHeader title="合同单位列表"/>
        </div>
      <Form layout="horizontal" {...{labelCol: { span: 4 }, wrapperCol: { span: 14 },} }>
          <Row>
				  <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="单位编码">
              <Input
                value={this.state.code}
                onChange={e => this.setState({code:e.target.value})}
                placeholder="单位编码"
                autoFocus
              />
						</Form.Item>
				  </Col>
				  <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="单位名称">
              <Input
                value={this.state.name}
                onChange={e => this.setState({name:e.target.value})}
                placeholder="单位名称"
              />
						</Form.Item>
				  </Col>
        </Row>
          <Row>
				  <Col span={10}>
          <Button type="primary" onClick={() => this.handleadd()} >
            <i className="fa fa-plus m-r-5" />
            新增
          </Button>
          <Divider type="vertical" />
          <Button type="primary" onClick={() => this.handlesel()} >
            <i className="fa fa-search m-r-5" />
            查询
          </Button>
          <Divider type="vertical" />
          <Button type="primary" onClick={() => this.handleload()} >
            <i className="fa fa-search m-r-5" />
            从HRP获取
          </Button>
				  </Col>
        </Row>
      </Form>
                 <div>
                      <Table rowKey='id'
                          rowClassName={(record, index) => getRowClassName(record, index)}
                          columns={listcolumns}
                          scroll={{x:'max-content'}}
                             dataSource={this.state.data}
                             pagination={paginationProps}
                             loading={this.state.loading}
                             onChange={this.handleTableChange}
                      />
                 </div>
    </ConfigProvider>
    </div>
    );
  }
}

routes.register(
  "Customertemp.List",
  routeWithUserSession({
    path: "/customertemp",
    title: "合同单位",
    render: pageProps => <CustomertempList {...pageProps}/>,
  })
);
// export default [
//   routeWithUserSession({
//     path: "/customertemp",
//     title: "合同单位",
//     render: pageProps => <CustomertempList {...pageProps} />,
//   }),
// ];
